<template>
  <div class="registration">
    <van-nav-bar title="入园登记" left-arrow @click-left="goBack"></van-nav-bar>
    <div class="container">
      <div v-if="!registration" class="scan_field">
        <van-field
          label="扫描VIN"
          v-model="VIN"
          placeholder="请扫描或输入VIN码"
          class="btn_radius btn_info my_field"
          label-class="label"
          @click-right-icon="scanClick"
        >
          <template #right-icon>
            <div class="scan_bg">
              <van-icon name="scan" class="white" v-if="!VIN" />
              <van-icon name="success" class="white" v-else />
            </div>
          </template>
        </van-field>
      </div>
      <div class="registration_info" v-if="registration">
        <div class="registration_info_content">
          <van-empty>
            <template #image>
              <van-icon name="checked" class="my-icon" />
            </template>
            <template #description>
              <div class="custom-description">
                <div class="title">登记完成</div>
              </div>
            </template>
          </van-empty>
          <div class="car_info car_name">
            <div class="title">车辆名称</div>
            <div class="content">
              {{ carName }}
            </div>
          </div>
          <div class="car_info vin">
            <div class="title">VIN码</div>
            <div class="content">
              {{ VIN }}
            </div>
          </div>
        </div>
        <div class="registration_info_footer">
          <van-button
            type="info"
            class="btn btn_continue btn_radius"
            plain
            @click="goBack"
          >
            返回首页
          </van-button>
          <van-button
            type="info"
            class="btn btn_continue btn_radius"
            @click="startNewRegistration"
          >
            开始新的登记
          </van-button>
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '30%' }"
      :close-on-click-overlay="false"
    >
      <div class="popup_content">
        <div class="error_msg">
          {{ errorMsg }}
        </div>
        <div class="btn_group">
          <van-button
            type="info"
            @click="closePopup"
            class="btn btn_cancel btn_radius"
            plain
          >
            取消
          </van-button>
          <van-button
            type="info"
            @click="continueScan"
            class="btn btn_continue btn_radius"
          >
            继续扫描
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "RegistrationIndex",
  data() {
    return {
      VIN: "",
      carName: "奇瑞2025款 瑞虎9",
      show: false,
      errorMsg: "",
      registration: false,
      carList: [
        "奇瑞2025款 瑞虎9",
        "比亚迪2024款 汉EV冠军版",
        "特斯拉2024款 Model Y",
        "吉利2025款 银河L7",
        "长安2025款 深蓝SL03",
        "本田2024款 雅阁e:PHEV",
        "奔驰2024款 GLC豪华型",
        "理想2025款 L9 Pro",
        "宝马2024款 i3 eDrive",
        "长城2025款 坦克500 Hi4-T",
        "丰田2024款 凯美瑞双擎",
        "小鹏2025款 G6 Max",
        "奥迪2024款 A6L尊享型",
        "红旗2025款 HS7旗舰版",
        "蔚来2024款 ET5旅行版",
      ],
    };
  },
  methods: {
    scanClick() {
      if (this.VIN) {
        this.$http
          .post("/mock/registration", {
            VIN: this.VIN,
          })
          .then((res) => {
            console.log(res);
            if (res.code === 200) {
              this.carName = res.data.carName;
              this.registration = true;
            }
          })
          .catch((err) => {
            console.log(err);
            this.errorMsg = err.data.msg;
            this.show = true;
          });
        console.log("登记");
        // 随机判断
        // let flag = Math.random() > 0.5;
        // if (flag) {
        //   console.log("登记成功");
        //   // 随机生成一个0-14的整数
        //   let index = Math.floor(Math.random() * this.carList.length);
        //   this.carName = this.carList[index];
        //   this.registration = true;
        // } else {
        //   console.log("登记失败");
        //   this.errorMsg = "VIN未查询到待入园车辆，请重新确认";
        //   this.show = true;
        // }
      } else {
        // 随机生成一传VIN码
        this.VIN = Math.random().toString(36).substring(2, 10).toUpperCase();
      }
    },
    closePopup() {
      this.errorMsg = "";
      this.show = false;
    },
    continueScan() {
      this.VIN = "";
      this.errorMsg = "";
      this.show = false;
    },
    goBack() {
      this.$router.push({
        path: "/",
      });
    },
    startNewRegistration() {
      this.VIN = "";
      this.registration = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.registration {
  height: 100%;
}
.container {
  height: calc(100% - 50px);
}
::v-deep .van-empty {
  padding: 32px 0 0;
}
::v-deep .van-empty__image {
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .label {
  color: #fff;
  font-size: 16px;
}
.white {
  color: #fff;
}
.scan_bg {
  background-color: rgba($color: #ffffff, $alpha: 0.3);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .my_field .van-field__control {
  color: #fff;
}
::v-deep .my_field .van-field__control::placeholder {
  color: #fff;
}
.popup_content {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .error_msg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
  }
  .btn_group {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .btn {
      width: 40%;
    }
  }
}
.scan_field {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/phone.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}
.registration_info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  .custom-description {
    .title {
      font-size: 20px;
      color: #333;
      font-weight: 700;
    }
  }
  .registration_info_content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .my-icon {
      font-size: 120px;
      color: #7ac933;
    }
    .car_info {
      margin-top: 10px;
      width: 50%;
      height: 50px;
      border-radius: 5px;
      background-color: #fff;
      padding: 5px 15px;
      font-size: 14px;
      .title {
        color: #999;
      }
      .content {
        color: #333;
        font-weight: 700;
        // 文本不换行
        white-space: nowrap;
        // 超出部分省略号
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .registration_info_footer {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .btn {
      width: 40%;
    }
  }
}
</style>